import { Layout, Tabs, TabsProps } from "antd";
import styles from "./index.module.scss";
import UserInfo from "./UserInfo";
import Change from "./Change";

const { Content } = Layout;

export default function PersonalCenter() {
  const items: TabsProps["items"] = [
    {
      key: "1",
      label: "Personal Center",
      disabled: true,
    },
    {
      key: "2",
      label: "User Information",
      children: <UserInfo />,
    },
    {
      key: "3",
      label: "Change Password",
      children: <Change />,
    },
  ];
  return (
    <div className={styles.frame}>
      <div className={styles.locationBox}>
        <div style={{ color: "#868786" }}>Location：</div>
        <div>Home/Personal Center</div>
      </div>
      <Layout>
        <Content
          style={{
            padding: 24,
            minHeight: 560,
            background: "white",
          }}
        >
          <Tabs tabPosition="left" defaultActiveKey="2" items={items} />
        </Content>
      </Layout>
    </div>
  );
}
